﻿<UserControl 
    x:Class="HeritageAcademy.Library.Controls.BookViewerSlider"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:HeritageAcademy.Library.Controls" 
    mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    d:DesignHeight="249" d:DesignWidth="254">
    <Grid Background="#0000">

        <!-- Track -->
        <Border Name="TrackBackground" CornerRadius="2.5" Height="5" BorderThickness="1" IsHitTestVisible="False" SnapsToDevicePixels="True">
            <Border.BorderBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#606060" Offset="0.6" />
                    <GradientStop Color="#989898" Offset="0.6" />
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#888888" Offset="0" />
                    <GradientStop Color="#A8A8A8" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>

        <!-- ProgressIndicator -->
        <Border x:Name="Indicator" Background="#404040" Width="5" Height="5" CornerRadius="2.5" HorizontalAlignment="Left" IsHitTestVisible="False" SnapsToDevicePixels="True" />

        <!-- Thumbnail -->
        <Rectangle x:Name="VerticalAnchor" Height="0" Fill="Transparent"/>
        
        <Popup x:Name="Thumbnail" AllowsTransparency="True" Placement="RelativePoint" PlacementTarget="{Binding ElementName=VerticalAnchor}" VerticalOffset="-80">
            <Grid x:Name="PopupContentGrid" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="25" >
                
                <Grid  Margin="4,8,16,-8">
                    <Border>
                        <Border.Effect>
                            <BlurEffect Radius="12" RenderingBias="Quality"/>
                        </Border.Effect>
                        <c:CalloutShape x:Name="MediumShadow" ArrowAlignment="Left" ArrowHeight="25" ArrowPlacement="Bottom" ArrowWidth="25" StrokeThickness="0" Margin="0,0,0,2" RenderTransformOrigin="0.507,0.861" Fill="#90000000">
                            <c:CalloutShape.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform AngleY="2.5"/>
                                    <RotateTransform/>
                                    <TranslateTransform Y="5.5"/>
                                </TransformGroup>
                            </c:CalloutShape.RenderTransform>
                        </c:CalloutShape>
                    </Border>
                </Grid>

                <c:CalloutShape ArrowHeight="25" ArrowWidth="25" ArrowPlacement="Bottom" ArrowAlignment="Left" Fill="{DynamicResource LogoBackgroundBrush}" Cursor="Hand" SnapsToDevicePixels="True"  />

                <Grid Margin="12,8,12,33" TextElement.Foreground="White" Width="250">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <!-- Position -->
                    <TextBlock Margin="0,0,10,0" FontSize="14" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0">
                        <TextBlock Text="Position" />
                        <TextBlock x:Name="PositionTextBlock" Text="0" FontWeight="Bold" />
                    </TextBlock>

                    <!-- Percentage -->
                    <TextBlock x:Name="PercentageTextBlock" Margin="0,0,0,0" FontSize="14" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1" />
                        
                    <!-- Chapter Name -->
                    <TextBlock x:Name="ChapterNameTextBlock" Margin="0,2,0,0" FontSize="11" HorizontalAlignment="Left" Grid.Row="1" Grid.ColumnSpan="2" TextTrimming="CharacterEllipsis" />
              </Grid>
            </Grid>
        </Popup>

    </Grid>
</UserControl>
